$(function () {
    let layer = layui.layer
    let form = layui.form

    // 定义全局对象，后期用来获取列表及筛选和分页
    let q = {
        pagenum: 1,//默认显示的页码
        pagesize: 2,//一页显示多少条数据
        cate_id: '',//文章分类的id
        state: ''//文章的状态 
        //此处又可以设置为初始页码功能
    }
    // 初始化列表
    initArtcleList()
    function initArtcleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                <tr>
                <td>${ele.title}</td>
                <td>${ele.cate_name}</td>
                <td>${formaDate(ele.pub_date)}</td>
                <td>${ele.state}</td>
                <td>
                    <a href="/article/art_edit.html?id=${ele.Id}"  class="btn-edit  layui-btn  layui-btn-xs">修改</a>
                    <button id="delBtn" type="button" data-id="${ele.Id}" class="del-btn layui-btn layui-btn-danger  layui-btn-xs">删除</button>
                </td>
                </tr>

                `)
            });
            $('tbody').empty().html(arr.join(''))
            // 根据返回的数据制作分页
            renderPage(res.data.total)
        })
    }
    // 初始化文章分类下拉框
    initArtCateList()
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            if (res.data.status !== 0) {
                return layer.msg(res.data.message)
            }
            //渲染页面数据
            let arr = [`<option value="">请选择文章类别</option>`]
            res.data.data.forEach(ele => {
                arr.push(

                    ` <option value="${ele.Id}">${ele.name}</option> `
                )
            });
            $('[name=cate_id]').empty().html(arr.join(''))
            form.render()
        })
    }
    // 发起请求筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault();
        // 获取下拉框的值
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        // 重新渲染
        initArtcleList()
    })
    // 分页区域
    // 封装一个函数作为分页功能 参数为res返回的数据的个数
    function renderPage(total) {
        // 我们导入的是layui的all版本不用use方法注册这里直接用
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox' //注意，这里的 test1 是 ID，不用加 # 号
            , count: total //数据总数，从服务端得到
            , limit: q.pagesize
            , limits: [2, 5, 10, 15, 30, 50]
            , curr: q.pagenum
            , groups: 3
            , layout: ['count', 'limit', 'prev', 'page', 'next', 'skip', 'refresh']
            , theme: '#c00'
            , jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行 防止死循环
                if (!first) {
                    //do something
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    // 交互重新渲染列表
                    initArtcleList()
                }
            }

        });

    }

    //删除功能
    $('tbody').on('click', '.del-btn', function () {
        let id = $(this).attr('data-id')
        // 增加用户体验询问框
        layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
            //do something
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg('恭喜您，删除成功！')
                // bug
                // 删除后页码跳转了页面文章列表不跳转加判断条件为删除按钮是一个，当前的页码值大于1就让列表的pagenum页码值减一
                if ($('#delBtn').length === 1 && q.pagenum > 1 ) {
                    q.pagenum--
                }

                // 重新渲染文章列表
                initArtcleList()
            });
            // 优化先把文章列表刷新后再关闭询问框 逻辑
            layer.close(index);


        })



    })
})